<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>


    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        /*.navs {*/
        /*padding: 15px;*/
        /*display: none;*/
        /*}*/
        body {
            padding-top: 50px;
        }

    </style>
</head>
<body>

<div class="container">
    <!--<h1 class="page-header">-->
    <!--Bootstrap前段框架-->
    <!--</h1>-->

    <!--<form action="" class="form">-->
    <!--<div class="form-group has-feedback">-->
    <!--<label for="">UserName：</label>-->
    <!--<input type="email" class="form-control" placeholder="Enter email">-->
    <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
    <!--</div>-->
    <!--<div class="form-group has-feedback">-->
    <!--<label for="">Password</label>-->
    <!--<input type="password" class="form-control" placeholder="Password">-->
    <!--<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>-->
    <!--</div>-->
    <!--<div class="form-group has-feedback">-->
    <!--<label for="">Tip</label>-->
    <!--<textarea name="" id="" rows="10" class="form-control"></textarea>-->
    <!--<span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<label for="">File</label>-->
    <!--<input type="file">-->
    <!--<p class="help-block">Example block-level help text here.</p>-->
    <!--</div>-->
    <!--<div class="checkbox">-->
    <!--<label for="">-->
    <!--<input type="checkbox">Check me out-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="checkbox">-->
    <!--<label for="">-->
    <!--<input type="checkbox" disabled>Option two is disabled-->
    <!--</label>-->
    <!--</div>-->

    <!--<div class="radio">-->
    <!--<label for="">-->
    <!--<input type="radio" name="optionsRadios" id="optionRadios1" value="option1" checked>-->
    <!--Option one is this and that&mdash;be sure to include why it's great-->
    <!--</label>-->
    <!--</div>-->

    <!--<div class="radio">-->
    <!--<label for="">-->
    <!--<input type="radio" name="optionsRadios" id="optionRadios2" value="option2">-->
    <!--Option two can be something else and selecting it will deselect option one-->
    <!--</label>-->
    <!--</div>-->

    <!--<div class="radio disabled">-->
    <!--<label for="">-->
    <!--<input type="radio" name="optionsRadios" id="optionRadios3" value="option2" disabled>-->
    <!--Option three is disabled-->
    <!--</label>-->
    <!--</div>-->

    <!--<div class="form-group">-->
    <!--<select name="" class="form-control">-->
    <!--<option value="">1</option>-->
    <!--<option value="">2</option>-->
    <!--<option value="">3</option>-->
    <!--<option value="">4</option>-->
    <!--<option value="">5</option>-->
    <!--<option value="">6</option>-->
    <!--<option value="">7</option>-->
    <!--</select>-->
    <!--</div>-->

    <!--<div class="form-group">-->
    <!--<select multiple class="form-control">-->
    <!--<option value="">1</option>-->
    <!--<option value="">2</option>-->
    <!--<option value="">3</option>-->
    <!--<option value="">4</option>-->
    <!--<option value="">5</option>-->
    <!--<option value="">6</option>-->
    <!--<option value="">7</option>-->
    <!--</select>-->
    <!--</div>-->

    <!--<div class="form-group">-->
    <!--<form role="form">-->
    <!--<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">-->
    <!--</form>-->
    <!--</div>-->

    <!--<div class="form-group">-->
    <!--<form action="" class="form-horizontal">-->
    <!--<div class="form-group has-success has-feedback">-->
    <!--<label for="" class="control-label col-sm-2">Input with success</label>-->
    <!--<div class="col-sm-10">-->
    <!--<input type="text" class="form-control">-->
    <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</form>-->
    <!--</div>-->
    <!--<button class="btn btn-default btn-block">Submit</button>-->
    <!--</form>-->
    <!--<form action="" class="form-inline">-->
    <!--<div class="form-group has-success has-feedback">-->
    <!--<label for="" class="control-label">-->
    <!--Input with success-->
    <!--</label>-->
    <!--<input type="text" class="form-control">-->
    <!--<span class="glyphicon glyphicon-ok form-control-feedback"></span>-->
    <!--</div>-->
    <!--</form>-->
</div>

<div class="container">

    <!--<h1 class="page-header">-->
    <!--Bootstrap前段框架-->
    <!--</h1>-->

    <!--<form action="" class="form-horizontal">-->
    <!--<div class="form-group">-->
    <!--<label for="" class="col-sm-2 control-label">Email</label>-->
    <!--<div class="col-sm-10">-->
    <!--<input type="email" class="form-control" placeholder="Email">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<label for="" class="col-sm-2 control-label">Password</label>-->
    <!--<div class="col-sm-10">-->
    <!--<input type="password" class="form-control" placeholder="Password">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<div class="col-sm-offset-2 col-sm-10">-->
    <!--<div class="checkbox">-->
    <!--<label for="">-->
    <!--<input type="checkbox">Remember me-->
    <!--</label>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
    <!--<div class="col-sm-offset-2 col-sm-10">-->
    <!--<div class="checkbox">-->
    <!--<button class="btn btn-default">Sign in</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</form>-->

    <!--<div class="input-group">-->
    <!--<input type="text" class="form-control">-->
    <!--<span class="input-group-addon">@</span>-->
    <!--<input type="text" class="form-control">-->
    <!--</div>-->

    <!--<div class="input-group">-->
    <!--<span class="input-group-addon">$</span>-->
    <!--<input type="text" class="form-control">-->
    <!--<span class="input-group-addon">.00</span>-->
    <!--</div>-->
</div>


<div class="container">
    <!--<h1 class="page-header">-->
    <!--导航-标签页-->
    <!--</h1>-->
    <!--<div class="row">-->
    <!--<div class="col-md-2">-->
    <!--<ul class="nav nav-pills nav-stacked">-->

    <!--<li class="active">-->
    <!--<a href="">Home</a>-->
    <!--</li>-->
    <!--<li class="">-->
    <!--<a href="">Profile</a>-->
    <!--</li>-->
    <!--<li class="">-->
    <!--<a href="">Messages</a>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<div class="col-md-10">-->
    <!--<div class="navs">-->
    <!--<p class="lead">Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is-->
    <!--very much!-->
    <!--Bootstrap is-->
    <!--very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! </p>-->
    <!--</div>-->

    <!--<div class="navs">-->
    <!--<p class="lead">Profile is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is-->
    <!--very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! </p>-->
    <!--<p class="lead">Profile is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much! </p>-->
    <!--<p class="lead">Profile is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is-->
    <!--very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! </p>-->
    <!--</div>-->

    <!--<div class="navs">-->
    <!--<p class="lead">Messages is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is-->
    <!--very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! Bootstrap is very-->
    <!--much!-->
    <!--Bootstrap is very much! Bootstrap is very much! Bootstrap is very much! </p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

</div>

<div class="container">
    <!--<h1 class="page-header">-->
    <!--导航头-->
    <!--</h1>-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="logo" height="20px" src="http://www.dgtle.com/static/image/logo/portal_b.png">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">起步</a></li>
                    <li><a href="#">全局CSS样式</a></li>
                    <li><a href="#">组件</a></li>
                    <li><a href="#">JavaScript插件</a></li>
                    <li><a href="#">定制</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search">

                        </span>
                    </button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <button type="button" class="btn btn-warning navbar-btn">Sign in</button>
                <p class="navbar-text">Signed in as Mark Otto</p>
                <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->
<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->
<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->
<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->
<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->
<!--<h1 class="page-header">-->
    <!--导航-标签页-->
<!--</h1>-->

<!--&lt;!&ndash;(li>a{$})*10&ndash;&gt;-->
<!--<div class="container">-->
    <!--<span class="label label-default">Default</span>-->
    <!--<span class="label label-primary">Primary</span>-->
    <!--<span class="label label-success">Success</span>-->
    <!--<span class="label label-info">Info</span>-->
    <!--<span class="label label-warning">Warning</span>-->
    <!--<span class="label label-danger">Danger</span>-->

    <!--<label for="" class="label label-default">Default</label>-->
    <!--<p class="label label-default">Default</p>-->
    <!--<a href="#">Inbox <span class="badge">42</span></a>-->


    <!--<button class="btn btn-primary">-->
        <!--Message-->
        <!--<span class="badge">4</span>-->
    <!--</button>-->

    <!--<ul class="nav nav-pills">-->
        <!--<li class="active"><a href="">Home-->
            <!--<span class="badge">42</span></a></li>-->
        <!--<li><a href="">Profile</a></li>-->
        <!--<li><a href="">Message-->
            <!--<span class="badge">3-->
            <!--</span>-->
        <!--</a>-->
        <!--</li>-->
    <!--</ul>-->

    <!--<h1 class="page-header">-->
        <!--导航-标签页-->
    <!--</h1>-->

    <!--<div class="list-group">-->
        <!--<a href="" class="list-group-item active">active <span class="badge">40</span></a>-->
        <!--<a href="" class="list-group-item">normal</a>-->
        <!--<a href="" class="list-group-item">normal</a>-->
        <!--<a href="" class="list-group-item">normal</a>-->
        <!--<a href="" class="list-group-item">normal</a>-->
    <!--</div>-->

    <!--<div class="jumbotron">-->
        <!--<h1>Hello, world!</h1>-->
        <!--<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured-->
            <!--content or information.</p>-->
        <!--<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>-->

    <!--</div>-->
<!--</div>-->


<!--<div class="jumbotron">-->
    <!--<div class="container">-->
        <!--<h1>Hello, world!</h1>-->
        <!--<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured-->
            <!--content or information.</p>-->
        <!--<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>-->
    <!--</div>-->
<!--</div>-->

<!--<div class="container">-->
    <!--<div class="page-header">-->
        <!--<h1>Example page header-->
            <!--<small>subtext for header</small>-->
        <!--</h1>-->
    <!--</div>-->
<!--</div>-->

<!--<div class="container">-->
    <!--<div class="row">-->
        <!--&lt;!&ndash;<div class="col-xs-6 col-md-3">&ndash;&gt;-->
        <!--&lt;!&ndash;<a href="" class="thumbnail">&ndash;&gt;-->
        <!--&lt;!&ndash;<img data-src="holder.js/100%x180" alt="...">&ndash;&gt;-->
        <!--&lt;!&ndash;</a>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->

        <!--<div class="col-md-3">-->
            <!--<a href="#" class="thumbnail">-->
                <!--<img data-src="holder.js/100%x180" alt="...">-->
            <!--</a>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="row">-->
        <!--<div class="col-sm-6 col-md-4">-->
            <!--<div class="thumbnail">-->
                <!--<img data-src="holder.js/300x300" alt="...">-->
                <!--<div class="caption">-->
                    <!--<h3>Thumbnail label</h3>-->
                    <!--<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida-->
                        <!--at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
                    <!--<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default"-->
                                                                                       <!--role="button">Button</a></p>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="row">-->
        <!--<nav>-->
            <!--<ul class="pager">-->
                <!--<li><a href="#">Previous</a></li>-->
                <!--<li><a href="#">Next</a></li>-->
            <!--</ul>-->
        <!--</nav>-->
        <!--<nav>-->
            <!--<ul class="pager">-->
                <!--<li class="previous disabled"><a href="#">&larr; Older</a></li>-->
                <!--<li class="next"><a href="#">Newer &rarr;</a></li>-->
            <!--</ul>-->
        <!--</nav>-->


        <!--<h3>Example heading <span class="label label-default">New</span></h3>-->
    <!--</div>-->

    <!--<div class="alert alert-success alert-dismissible" role="alert">-->
        <!--<span class="close" data-dismiss="alert">&times;</span>-->
        <!--<p>Well done! You successfully read this important alert message.</p>-->
    <!--</div>-->
    <!--<div class="alert alert-danger alert-dismissible" role="alert">-->
        <!--<strong>Warning!</strong> Better check yourself, you're not looking too good.-->
        <!--<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span-->
                <!--class="sr-only">Close</span></button>-->
    <!--</div>-->

    <!--<div class="progress">-->
        <!--<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0"-->
             <!--aria-valuemax="100" style="width: 40%;">-->
            <!--&lt;!&ndash;<span class="sr-only">60% Complete</span>&ndash;&gt;-->
            <!--40%-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->


<!--&lt;!&ndash; jQuery (necessary for Bootstrap's JavaScript plugins) &ndash;&gt;-->
<!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
<!--&lt;!&ndash;&lt;!&ndash; Include all compiled plugins (below), or include individual files as needed &ndash;&gt;&ndash;&gt;-->
<!--<script src="js/bootstrap.min.js"></script>-->
<!--<script src="js/holder.min.js"></script>-->

</body>
<script>
	$('li').mouseenter(function () {
		$(this).addClass('active');
		$('li').not($(this)).removeClass('active');

		idx = $(this).index('li')
		$('.navs').eq(idx).stop.show(1000);
		$('.navs').not($('.navs').eq(idx)).stop.hide(100);
	})

	$('.navs').eq(0).show(10)

	//    $('.progress-bar').animate({
	//    	'width': '100%'
	//    }, 1000);

	s = 0;
	v = 1;

	interval = setInterval(function () {
		if (s > 100) {
			clearInterval(interval)
			$('.progress-bar').removeClass('active');
		}
		s += v;
		$('.progress-bar').html(s + '%').css({'width': s + '%'});
	}, 100)
</script>
</html>